<template>
    <el-container>
        <el-header height = 200px id = "logo">
            <img src="../../pictures/logo.png" width="200px" height="160px">
        </el-header>
        <el-main>
            <div class="form-container">
                <el-form :model="user" :rules="rules" ref="user" label-width="0px" class="demo-user" size="large" width = "100%">
                    <el-form-item>
                        <el-upload
                            class="avatar-uploader"
                            :show-file-list="false"
                            :before-upload="handleFileChange" 
                            :on-change="handleFileChange">
                            <el-button size="small" type="primary">上传头像</el-button>
                        </el-upload>
                        <span v-if="fileName">{{ fileName }}</span>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-input placeholder="请输入用户名" v-model="user.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="confirmPassword">
                        <el-input placeholder="请确认密码" v-model="user.confirmPassword" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="button-container">
                            <el-button type="primary" size="large" @click="register">注册</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-main>
    </el-container>
</template>

<script>

import { userregister } from '@/api/register.js'

export default {
    data() {
      return {
        user: {
          name: '',
          password: '',
          confirmPassword: '',
          avatar: 'null'
        },
        fileName: 'null', // 存储文件名称
        
        rules: {
            name: [
                { required: true, message: '请输入用户名', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' }
            ],
            confirmPassword: [
                { required: true, message: '请确认密码', trigger: 'blur' },
                { validator: this.validateConfirmPassword, trigger: 'blur' }
            ]
        }
      }
    },
    methods: {
        validateConfirmPassword(rule, value, callback) {
            if (value !== this.user.password) {
                callback(new Error('两次输入的密码不一致'));
            } else {
                callback();
            }
        },

        handleFileChange(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                return false; // 阻止文件上传
            }

            this.user.avatar = file.raw; // 存储到 user.avatar
            this.fileName = file.name; // 更新文件名称
        },

        register() {
            this.$refs.user.validate((valid) => {
                if (valid) {
                    const formData = new FormData(); // 创建 FormData 对象
                    formData.append('name', this.user.name);
                    formData.append('password', this.user.password);
                    formData.append('image', this.user.avatar); 
                    console.log('FormData内容:', [...formData]); // 监控 FormData 内容
                    userregister( formData ).then(result => {
                        if (result.data.code === 1) {
                            console.log('注册成功');
                            window.location.href = '#/login';
                        } 
                        else {
                            console.log('注册失败');
                            alert(result.data.msg);
                        }
                    })
                } 
                else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>

<style>
/* 网站logo样式 */
#logo {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 确保 .el-container 是 flex 容器，如果它不是，可以添加以下样式 */
.el-container {
    display: flex;
    flex-direction: column; /* 使 flex 子项在主轴上为垂直排列 */
    height: 100vh; /* 容器高度为视口的 100% */
}
/* 使 .el-main 也成为 flex 容器，并居中其子元素 */
.el-main {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
/* 限制表单的最大宽度，防止在大屏幕上过宽 */
.demo-user {
    max-width: 350px; /* 可以根据需要调整这个值 */
    width: 100%; /* 表单宽度为 100%，但不会超过 max-width */
}

/* 按钮部分居中 */
.button-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 提交整体部分居中 */
.form-container {
    display: flex;
    flex-direction: column; /* 设置为垂直排列 */
    align-items: center; /* 可选：居中对齐 */
}

</style>